<template>
  <a-space wrap>
    <div>
      <a-button type="primary" ghost @click="modelValueObj.showConfirmButtonModelValue = true">1.不显示确定按钮</a-button>
      <AsyncModal v-model:open="modelValueObj.showConfirmButtonModelValue" :showConfirmButton="false">
        <p>不显示确定按钮</p>
      </AsyncModal>
    </div>
    <div>
      <a-button type="primary" ghost @click="modelValueObj.contentModelValue = true">2.内容区域滚动条</a-button>
      <AsyncModal v-model:open="modelValueObj.contentModelValue" @ok="ok">
        <div class="more-content">内容很多</div>
      </AsyncModal>
    </div>
  </a-space>
</template>

<script setup lang="ts">
defineOptions({
  name: 'CustomModel'
})
import { reactive, ref } from 'vue'
import { loadingPromise } from '@/utils/tools'
import AsyncModal from '_c/AsyncModal/index.vue'

const modelValueObj = reactive({
  showConfirmButtonModelValue: false,
  contentModelValue: false,
  draggableModelValue: false,
  confirmLoadingModelValue: false,
  autoConfirmLoadingModelValue: false,
  destroyOnCloseModelValue: false
})
const ok = () => {
  Object.keys(modelValueObj).map(item => {
    modelValueObj[item as keyof typeof modelValueObj] = false
  })
}

// 示例4：
const confirmLoading = ref(false)
const onConfirmLoading = async () => {
  confirmLoading.value = true
  await loadingPromise([1500, 2000, 2500])
  confirmLoading.value = false
  modelValueObj.confirmLoadingModelValue = false
}

/**
 * 示例5: 模拟网络请求等Promise异步操作
 * 由于emit无法获取函数返回值，所以这里通过emit调用自定义函数后会传出一个callBack函数，
 * 通过调用callBack传入一个Promise，组件会根据Promise状态控制按钮的loading状态
 */
const autoConfirmLoading = async (callBack: any, otherParams: any) => {
  let res: Function
  // 创建Promise模拟网络请求
  const confirmPromise = new Promise<void>((resolve, reject) => {
    res = resolve
  })
  /**
   *  将Promise传入callBack函数
   */
  callBack(confirmPromise)
  // 模拟网络请求返回结果
  setTimeout(() => {
    res()
    modelValueObj.autoConfirmLoadingModelValue = false
  }, 2000)
}
</script>

<style scoped>
.more-content {
  height: 900px;
}
</style>
